<template>
  <div class="tang-poetry">
    <div class="header">
      <h1>📜 唐诗学习</h1>
      <p>感受中华文化的瑰宝，品味古典诗词的韵味</p>
      <div class="search-bar">
        <input v-model="searchText" @keyup.enter="onSearch" placeholder="搜索标题或内容..." class="search-input" />
        <button @click="onSearch" class="search-btn">搜索</button>
        <button v-if="searchText" @click="clearSearch" class="clear-btn">清空</button>
      </div>
      <div class="stats">
        <span>共收录 {{ totalPoems }} 首经典唐诗</span>
        <span>当前显示第 {{ currentPage }}/{{ totalPages }} 页</span>
      </div>
    </div>

    <div class="poetry-container">
      <div class="poetry-card" v-for="(poem, index) in currentPoems" :key="index">
        <div class="poem-header">
          <h2>{{ poem.title }}</h2>
          <span class="author">【{{ poem.dynasty }}】{{ poem.author }}</span>
        </div>
        
        <div class="poem-content">
          <div class="original-text">
            <h3>原文</h3>
            <div class="verses">
              <p v-for="(verse, vIndex) in poem.verses" :key="vIndex" class="verse">
                {{ verse }}
              </p>
            </div>
          </div>
          
          <div class="translation" v-if="showTranslation">
            <h3>译文</h3>
            <div class="verses">
              <p class="verse">{{ poem.translations }}</p>
            </div>
          </div>
          
          <div class="appreciation" v-if="showAppreciation">
            <h3>赏析</h3>
            <p>{{ poem.appreciation }}</p>
          </div>
        </div>
        
        <div class="poem-controls">
          <button @click="toggleTranslation(index)" class="control-btn">
            {{ showTranslation ? '隐藏译文' : '显示译文' }}
          </button>
          <button @click="toggleAppreciation(index)" class="control-btn">
            {{ showAppreciation ? '隐藏赏析' : '显示赏析' }}
          </button>
          <button @click="playAudio(poem)" class="control-btn audio-btn">
            🎵 朗读
          </button>
        </div>
      </div>
    </div>

    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1" class="page-btn">
        上一页
      </button>
      <span class="page-info">{{ currentPage }} / {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages" class="page-btn">
        下一页
      </button>
    </div>

    <div class="learning-tools">
      <h2>学习工具</h2>
      
      <!-- 语音设置 -->
      <div class="voice-settings">
        <h3>🎤 语音设置</h3>
        <div class="voice-controls">
          <button @click="toggleVoiceSelector" class="control-btn">
            {{ showVoiceSelector ? '隐藏语音选择' : '选择语音' }}
          </button>
          <button @click="testVoice" class="control-btn" v-if="availableVoices.length > 0">
            🎵 测试语音
          </button>
          <div v-if="showVoiceSelector" class="voice-selector">
            <div v-for="(voice, index) in availableVoices" :key="index" class="voice-option">
              <input 
                type="radio" 
                :id="'voice-' + index" 
                :value="index" 
                v-model="selectedVoiceIndex"
                name="voice"
              />
              <label :for="'voice-' + index">
                {{ voice.name }} ({{ voice.lang }})
              </label>
            </div>
          </div>
        </div>
      </div>
      
      <div class="tools-grid">
        <div class="tool-card" @click="startMemoryGame">
          <h3>🧠 记忆游戏</h3>
          <p>通过填空练习记忆诗句</p>
        </div>
        <div class="tool-card" @click="startRecitation">
          <h3>🎤 朗诵练习</h3>
          <p>练习朗诵，感受韵律</p>
        </div>
        <div class="tool-card" @click="showCalligraphy">
          <h3>✍️ 书法欣赏</h3>
          <p>欣赏书法艺术</p>
        </div>
        <div class="tool-card" @click="randomPoem">
          <h3>🎲 随机学习</h3>
          <p>随机选择一首诗学习</p>
        </div>
      </div>
    </div>

    <!-- 记忆游戏界面 -->
    <div v-if="memoryGameActive" class="memory-game-overlay">
      <div class="memory-game-container">
        <div v-if="!showGameResult" class="game-area">
          <div class="game-header">
            <h2>🧠 唐诗记忆游戏</h2>
            <p>请根据提示填写缺失的字</p>
            <div class="poem-info">
              <h3>{{ currentGamePoem.title }} - {{ currentGamePoem.author }}</h3>
            </div>
          </div>
          
          <div class="game-content">
            <div v-for="(verse, verseIndex) in gameVerses" :key="verseIndex" class="verse-game">
              <div class="verse-display">
                <span class="verse-number">第{{ verseIndex + 1 }}句：</span>
                <div class="blanks-container">
                  <template v-for="(char, charIndex) in verse.blanks" :key="charIndex">
                    <span v-if="char === '___'" class="blank-input">
                      <input 
                        v-model="verse.userInput[charIndex]"
                        type="text" 
                        maxlength="1"
                        class="blank-field"
                        placeholder="?"
                      />
                    </span>
                    <span v-else class="char-text">{{ char }}</span>
                  </template>
                </div>
              </div>
            </div>
          </div>
          
          <div class="game-controls">
            <button @click="checkGameAnswer" class="control-btn">提交答案</button>
            <button @click="exitMemoryGame" class="control-btn">退出游戏</button>
          </div>
        </div>
        
        <div v-else class="game-result">
          <h2>🎉 游戏结束！</h2>
          <div class="result-stats">
            <div class="stat-item">
              <span class="stat-label">得分：</span>
              <span class="stat-value">{{ gameScore }}/{{ totalGameWords }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">正确率：</span>
              <span class="stat-value">{{ getAccuracy() }}%</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">用时：</span>
              <span class="stat-value">{{ getGameTime() }}</span>
            </div>
          </div>
          
          <div class="result-poem">
            <h3>完整诗句：</h3>
            <div class="complete-poem">
              <p v-for="(verse, index) in currentGamePoem.verses" :key="index" class="verse-line">
                {{ verse }}
              </p>
            </div>
          </div>
          
          <div class="game-controls">
            <button @click="restartMemoryGame" class="control-btn">再玩一次</button>
            <button @click="exitMemoryGame" class="control-btn">返回学习</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 朗读练习界面 -->
    <div v-if="recitationActive" class="recitation-overlay">
      <div class="recitation-container">
        <div v-if="!showRecitationResult" class="recitation-area">
          <div class="recitation-header">
            <h2>🎤 朗读练习</h2>
            <p>听标准朗读，然后练习朗诵</p>
            <div class="poem-info">
              <h3>{{ currentRecitationPoem.title }} - {{ currentRecitationPoem.author }}</h3>
            </div>
          </div>
          
          <div class="recitation-content">
            <div class="poem-display">
              <h4>诗句内容：</h4>
              <div class="verses-display">
                <p v-for="(verse, index) in currentRecitationPoem.verses" :key="index" class="verse-line">
                  {{ verse }}
                </p>
              </div>
            </div>
            
            <div class="recitation-controls">
              <button @click="playStandardRecitation" class="control-btn">
                🔊 听标准朗读
              </button>
              <button @click="startRecording" :disabled="isRecording" class="control-btn record-btn">
                {{ isRecording ? '🔴 录音中...' : '🎙️ 开始录音' }}
              </button>
            </div>
            
            <div v-if="isRecording" class="recording-status">
              <div class="recording-indicator">
                <span class="pulse"></span>
                正在录音，请朗读诗句...
              </div>
              <div class="recording-timer">5秒后自动停止</div>
            </div>
          </div>
          
          <div class="recitation-controls">
            <button @click="exitRecitation" class="control-btn">退出练习</button>
          </div>
        </div>
        
        <div v-else class="recitation-result">
          <h2>🎉 朗读完成！</h2>
          <div class="result-stats">
            <div class="stat-item">
              <span class="stat-label">朗读评分：</span>
              <span class="stat-value">{{ recitationScore }}分</span>
            </div>
          </div>
          
          <div class="feedback-section">
            <h3>朗读反馈：</h3>
            <ul class="feedback-list">
              <li v-for="(feedback, index) in recitationFeedback" :key="index" class="feedback-item">
                {{ feedback }}
              </li>
            </ul>
          </div>
          
          <div class="audio-comparison" v-if="recordedAudio">
            <h3>音频对比：</h3>
            <div class="audio-controls">
              <button @click="playStandardRecitation" class="control-btn">
                🔊 播放标准朗读
              </button>
              <button @click="playRecordedAudio" class="control-btn">
                🎵 播放我的朗读
              </button>
            </div>
          </div>
          
          <div class="recitation-controls">
            <button @click="restartRecitation" class="control-btn">再练习一次</button>
            <button @click="exitRecitation" class="control-btn">返回学习</button>
          </div>
        </div>
      </div>
    </div>

    <div class="controls">
      <button @click="goHome" class="home-btn">返回首页</button>
    </div>
  </div>
</template>

<script>
// import { tangPoems } from '../data/tangPoems.js' // 注释掉本地数据
import axios from 'axios'

export default {
  name: 'TangPoetry',
  data() {
    return {
      showTranslation: false,
      showAppreciation: false,
      poems: [], // 初始为空，后续通过API获取
      currentPage: 1,
      poemsPerPage: 3,
      searchText: '',
      availableVoices: [],
      selectedVoiceIndex: 0,
      showVoiceSelector: false,
      // 记忆游戏相关
      memoryGameActive: false,
      currentGamePoem: null,
      gameVerses: [],
      userAnswers: [],
      gameScore: 0,
      totalGameWords: 0,
      showGameResult: false,
      gameStartTime: null,
      gameEndTime: null,
      // 朗读练习相关
      recitationActive: false,
      currentRecitationPoem: null,
      recitationMode: 'practice', // 'practice', 'record', 'compare'
      isRecording: false,
      recordedAudio: null,
      showRecitationResult: false,
      recitationScore: 0,
      recitationFeedback: []
    }
  },
  computed: {
    totalPoems() {
      return this.poems.length;
    },
    totalPages() {
      return Math.ceil(this.totalPoems / this.poemsPerPage);
    },
    currentPoems() {
      const start = (this.currentPage - 1) * this.poemsPerPage;
      const end = start + this.poemsPerPage;
      return this.poems.slice(start, end);
    }
  },
  mounted() {
    this.loadVoices();
    this.fetchPoems();
  },
  methods: {
    async fetchPoems(q = '') {
      try {
        const res = await axios.get('/api/tang-poems' + (q ? `?q=${encodeURIComponent(q)}` : ''));
        this.poems = res.data.map(poem => ({
          ...poem,
          dynasty: poem.dynasty || '唐',
          translations: poem.translations || '',
          appreciation: poem.appreciation || '',
        }));
        this.currentPage = 1;
      } catch (e) {
        alert('获取唐诗数据失败');
      }
    },
    loadVoices() {
      if ('speechSynthesis' in window) {
        // 等待语音列表加载完成
        const loadVoices = () => {
          const voices = window.speechSynthesis.getVoices();
          this.availableVoices = voices.filter(voice => 
            voice.lang.includes('zh') || voice.lang.includes('en')
          );
          
          // 默认选择第一个中文语音
          const chineseVoiceIndex = this.availableVoices.findIndex(voice => 
            voice.lang.includes('zh')
          );
          if (chineseVoiceIndex !== -1) {
            this.selectedVoiceIndex = chineseVoiceIndex;
          }
        };
        
        // 如果语音列表已经加载
        if (window.speechSynthesis.getVoices().length > 0) {
          loadVoices();
        } else {
          // 等待语音列表加载
          window.speechSynthesis.onvoiceschanged = loadVoices;
        }
      }
    },
    toggleTranslation(index) {
      this.showTranslation = !this.showTranslation;
    },
    toggleAppreciation(index) {
      this.showAppreciation = !this.showAppreciation;
    },
    playAudio(poem) {
      // 使用 Web Speech API 朗读诗句
      if ('speechSynthesis' in window) {
        // 停止当前正在播放的音频
        window.speechSynthesis.cancel();
        
        // 创建朗读文本
        const text = `${poem.title}，作者${poem.author}。${poem.verses.join('')}`;
        
        // 创建语音合成对象
        const utterance = new SpeechSynthesisUtterance(text);
        
        // 使用用户选择的语音
        if (this.availableVoices.length > 0 && this.selectedVoiceIndex < this.availableVoices.length) {
          utterance.voice = this.availableVoices[this.selectedVoiceIndex];
        }
        
        // 设置语音参数 - 调整为更标准的朗读效果
        utterance.lang = 'zh-CN'; // 中文
        utterance.rate = 0.7; // 语速稍慢，更清晰
        utterance.pitch = 1.1; // 音调稍高，更清晰
        utterance.volume = 1.0; // 音量最大
        
        // 开始播放
        window.speechSynthesis.speak(utterance);
        
        // 显示播放状态
        this.$nextTick(() => {
          const audioBtn = event.target;
          const originalText = audioBtn.textContent;
          audioBtn.textContent = '🔊 播放中...';
          audioBtn.disabled = true;
          
          // 播放结束后恢复按钮状态
          utterance.onend = () => {
            audioBtn.textContent = originalText;
            audioBtn.disabled = false;
          };
          
          utterance.onerror = () => {
            audioBtn.textContent = originalText;
            audioBtn.disabled = false;
            alert('音频播放失败，请检查浏览器设置');
          };
        });
      } else {
        alert('您的浏览器不支持语音合成功能，请使用现代浏览器');
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        // 停止所有正在播放的音频
        if ('speechSynthesis' in window) {
          window.speechSynthesis.cancel();
        }
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        // 停止所有正在播放的音频
        if ('speechSynthesis' in window) {
          window.speechSynthesis.cancel();
        }
        this.currentPage++;
      }
    },
    randomPoem() {
      const randomIndex = Math.floor(Math.random() * this.totalPoems);
      const targetPage = Math.floor(randomIndex / this.poemsPerPage) + 1;
      this.currentPage = targetPage;
      alert(`随机选择了《${this.poems[randomIndex].title}》`);
    },
    startMemoryGame() {
      // 随机选择一首诗
      const randomIndex = Math.floor(Math.random() * this.poems.length);
      this.currentGamePoem = this.poems[randomIndex];
      
      // 准备游戏数据
      this.gameVerses = [];
      this.userAnswers = [];
      this.gameScore = 0;
      this.totalGameWords = 0;
      
      // 为每句诗创建填空
      this.currentGamePoem.verses.forEach((verse, verseIndex) => {
        const words = verse.split('');
        const blanks = [];
        const answers = [];
        const userInputs = [];
        
        // 随机选择一些字作为填空（大约30%的字）
        words.forEach((word, wordIndex) => {
          if (word !== '，' && word !== '。' && Math.random() < 0.3) {
            blanks.push('___');
            answers.push(word);
            userInputs.push('');
            this.totalGameWords++;
          } else {
            blanks.push(word);
            answers.push('');
            userInputs.push('');
          }
        });
        
        this.gameVerses.push({
          original: verse,
          blanks: blanks,
          answers: answers,
          userInput: userInputs
        });
      });
      
      this.memoryGameActive = true;
      this.showGameResult = false;
      this.gameStartTime = new Date();
    },
    checkGameAnswer() {
      let correctCount = 0;
      
      this.gameVerses.forEach((verse, verseIndex) => {
        verse.answers.forEach((answer, answerIndex) => {
          if (answer && verse.userInput[answerIndex] === answer) {
            correctCount++;
          }
        });
      });
      
      this.gameScore = correctCount;
      this.gameEndTime = new Date();
      this.showGameResult = true;
    },
    restartMemoryGame() {
      this.memoryGameActive = false;
      this.showGameResult = false;
      this.startMemoryGame();
    },
    exitMemoryGame() {
      this.memoryGameActive = false;
      this.showGameResult = false;
      this.currentGamePoem = null;
      this.gameVerses = [];
      this.userAnswers = [];
    },
    getGameTime() {
      if (this.gameStartTime && this.gameEndTime) {
        const timeDiff = this.gameEndTime - this.gameStartTime;
        const minutes = Math.floor(timeDiff / 60000);
        const seconds = Math.floor((timeDiff % 60000) / 1000);
        return `${minutes}分${seconds}秒`;
      }
      return '0分0秒';
    },
    getAccuracy() {
      if (this.totalGameWords === 0) return 0;
      return Math.round((this.gameScore / this.totalGameWords) * 100);
    },
    startRecitation() {
      // 随机选择一首诗进行朗读练习
      const randomIndex = Math.floor(Math.random() * this.poems.length);
      this.currentRecitationPoem = this.poems[randomIndex];
      this.recitationActive = true;
      this.showRecitationResult = false;
      this.recitationMode = 'practice';
      this.isRecording = false;
      this.recordedAudio = null;
      this.recitationScore = 0;
      this.recitationFeedback = [];
    },
    showCalligraphy() {
      alert('书法欣赏功能即将上线！');
    },
    goHome() {
      this.$router.push('/');
    },
    toggleVoiceSelector() {
      this.showVoiceSelector = !this.showVoiceSelector;
    },
    testVoice() {
      if ('speechSynthesis' in window && this.availableVoices.length > 0) {
        // 停止当前播放
        window.speechSynthesis.cancel();
        
        const selectedVoice = this.availableVoices[this.selectedVoiceIndex];
        const testText = '这是一段测试语音，用于检查语音质量。';
        
        const utterance = new SpeechSynthesisUtterance(testText);
        utterance.voice = selectedVoice;
        utterance.lang = 'zh-CN';
        utterance.rate = 0.7;
        utterance.pitch = 1.1;
        utterance.volume = 1.0;
        
        window.speechSynthesis.speak(utterance);
      }
    },
    playStandardRecitation() {
      if (this.currentRecitationPoem && 'speechSynthesis' in window) {
        // 停止当前播放
        window.speechSynthesis.cancel();
        
        const text = `${this.currentRecitationPoem.title}，作者${this.currentRecitationPoem.author}。${this.currentRecitationPoem.verses.join('')}`;
        const utterance = new SpeechSynthesisUtterance(text);
        
        // 使用用户选择的语音
        if (this.availableVoices.length > 0 && this.selectedVoiceIndex < this.availableVoices.length) {
          utterance.voice = this.availableVoices[this.selectedVoiceIndex];
        }
        
        utterance.lang = 'zh-CN';
        utterance.rate = 0.6; // 朗读练习时语速更慢
        utterance.pitch = 1.0;
        utterance.volume = 1.0;
        
        window.speechSynthesis.speak(utterance);
      }
    },
    startRecording() {
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        this.isRecording = true;
        this.recitationMode = 'record';
        
        navigator.mediaDevices.getUserMedia({ audio: true })
          .then(stream => {
            const mediaRecorder = new MediaRecorder(stream);
            const audioChunks = [];
            
            mediaRecorder.ondataavailable = (event) => {
              audioChunks.push(event.data);
            };
            
            mediaRecorder.onstop = () => {
              const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
              this.recordedAudio = URL.createObjectURL(audioBlob);
              this.analyzeRecitation();
            };
            
            mediaRecorder.start();
            
            // 5秒后自动停止录音
            setTimeout(() => {
              if (this.isRecording) {
                mediaRecorder.stop();
                this.isRecording = false;
                stream.getTracks().forEach(track => track.stop());
              }
            }, 5000);
          })
          .catch(error => {
            console.error('录音失败:', error);
            alert('无法访问麦克风，请检查浏览器权限设置');
            this.isRecording = false;
          });
      } else {
        alert('您的浏览器不支持录音功能');
      }
    },
    analyzeRecitation() {
      // 模拟朗读分析
      this.recitationScore = Math.floor(Math.random() * 40) + 60; // 60-100分
      this.recitationFeedback = [
        '发音清晰，语调自然',
        '节奏把握较好',
        '情感表达到位',
        '建议多练习停顿'
      ];
      this.showRecitationResult = true;
    },
    playRecordedAudio() {
      if (this.recordedAudio) {
        const audio = new Audio(this.recordedAudio);
        audio.play();
      }
    },
    restartRecitation() {
      this.recitationActive = false;
      this.showRecitationResult = false;
      this.startRecitation();
    },
    exitRecitation() {
      this.recitationActive = false;
      this.showRecitationResult = false;
      this.currentRecitationPoem = null;
      this.isRecording = false;
      this.recordedAudio = null;
      
      // 停止所有音频播放
      if ('speechSynthesis' in window) {
        window.speechSynthesis.cancel();
      }
    },
    onSearch() {
      this.fetchPoems(this.searchText);
    },
    clearSearch() {
      this.searchText = '';
      this.fetchPoems();
    }
  }
}
</script>

<style scoped>
.tang-poetry {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'SimSun', '宋体', serif;
  background: linear-gradient(135deg, #f5f5dc 0%, #f0e68c 100%);
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 30px;
  background: white;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 2px solid #d4af37;
}

.header h1 {
  margin: 0 0 10px 0;
  color: #8b4513;
  font-size: 2.5em;
  font-weight: bold;
}

.header p {
  margin: 0;
  color: #696969;
  font-size: 1.2em;
}

.search-bar {
  margin: 16px 0 8px 0;
  display: flex;
  align-items: center;
}
.search-input {
  padding: 6px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  margin-right: 8px;
}
.search-btn {
  padding: 6px 16px;
  font-size: 16px;
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 8px;
}
.clear-btn {
  padding: 6px 12px;
  font-size: 16px;
  background: #f56c6c;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.stats {
  margin-top: 10px;
  color: #696969;
  font-size: 1.1em;
}

.poetry-container {
  display: grid;
  gap: 25px;
  margin-bottom: 30px;
}

.poetry-card {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 2px solid #d4af37;
  transition: all 0.3s ease;
}

.poetry-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.poem-header {
  text-align: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0e68c;
}

.poem-header h2 {
  margin: 0 0 10px 0;
  color: #8b4513;
  font-size: 2em;
  font-weight: bold;
}

.author {
  color: #696969;
  font-size: 1.1em;
  font-style: italic;
}

.poem-content {
  margin-bottom: 25px;
}

.original-text, .translation, .appreciation {
  margin-bottom: 20px;
}

.original-text h3, .translation h3, .appreciation h3 {
  color: #8b4513;
  font-size: 1.3em;
  margin-bottom: 15px;
  border-left: 4px solid #d4af37;
  padding-left: 10px;
}

.verses {
  background: #fafafa;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

.verse {
  margin: 8px 0;
  font-size: 1.2em;
  line-height: 1.8;
  color: #333;
  text-align: center;
}

.translation .verse {
  color: #666;
  font-size: 1.1em;
}

.appreciation p {
  line-height: 1.8;
  color: #555;
  font-size: 1.1em;
  text-align: justify;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 8px;
  border-left: 4px solid #d4af37;
}

.poem-controls {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.control-btn {
  background: linear-gradient(135deg, #d4af37, #b8860b);
  border: none;
  padding: 12px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  color: white;
  transition: all 0.3s ease;
  font-size: 1em;
}

.control-btn:hover {
  background: linear-gradient(135deg, #b8860b, #8b6914);
  transform: translateY(-2px);
}

.audio-btn {
  background: linear-gradient(135deg, #4CAF50, #45a049);
}

.audio-btn:hover {
  background: linear-gradient(135deg, #45a049, #3d8b40);
}

.control-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.control-btn:disabled:hover {
  transform: none;
  background: linear-gradient(135deg, #d4af37, #b8860b);
}

.audio-btn:disabled {
  background: linear-gradient(135deg, #ff9800, #f57c00);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

.pagination {
  text-align: center;
  margin-bottom: 30px;
}

.page-btn {
  background: linear-gradient(135deg, #8b4513, #a0522d);
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  color: white;
  transition: all 0.3s ease;
  font-size: 1em;
}

.page-btn:hover {
  background: linear-gradient(135deg, #a0522d, #8b4513);
  transform: translateY(-2px);
}

.page-info {
  margin: 0 10px;
  color: #696969;
  font-size: 1.1em;
}

.learning-tools {
  background: white;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 2px solid #d4af37;
  margin-bottom: 30px;
}

.learning-tools h2 {
  text-align: center;
  color: #8b4513;
  margin-bottom: 20px;
  font-size: 1.8em;
}

.voice-settings {
  margin-bottom: 20px;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

.voice-settings h3 {
  color: #8b4513;
  margin-bottom: 10px;
  text-align: center;
  font-size: 1.2em;
}

.voice-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.control-btn {
  margin-right: 10px;
}

.voice-selector {
  background: white;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #d4af37;
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  max-width: 400px;
}

.voice-option {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 5px;
  transition: background-color 0.2s;
}

.voice-option:hover {
  background-color: #f0f0f0;
}

.voice-option input[type="radio"] {
  margin-right: 10px;
}

.voice-option label {
  cursor: pointer;
  color: #333;
  font-size: 0.9em;
  flex: 1;
}

.voice-option input[type="radio"]:checked + label {
  color: #8b4513;
  font-weight: bold;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.tool-card {
  background: linear-gradient(135deg, #f0e68c, #daa520);
  padding: 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  border: 2px solid #d4af37;
}

.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.tool-card h3 {
  color: #8b4513;
  margin: 0 0 10px 0;
  font-size: 1.3em;
}

.tool-card p {
  color: #696969;
  margin: 0;
  font-size: 1em;
}

.controls {
  text-align: center;
}

.home-btn {
  background: linear-gradient(135deg, #8b4513, #a0522d);
  border: none;
  padding: 15px 30px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: bold;
  color: white;
  transition: all 0.3s ease;
  font-size: 1.1em;
}

.home-btn:hover {
  background: linear-gradient(135deg, #a0522d, #8b4513);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .tang-poetry {
    padding: 15px;
  }
  
  .header h1 {
    font-size: 2em;
  }
  
  .poetry-card {
    padding: 20px;
  }
  
  .poem-header h2 {
    font-size: 1.6em;
  }
  
  .verse {
    font-size: 1.1em;
  }
  
  .poem-controls {
    flex-direction: column;
    align-items: center;
  }
  
  .tools-grid {
    grid-template-columns: 1fr;
  }
}

/* 记忆游戏样式 */
.memory-game-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.memory-game-container {
  background: white;
  border-radius: 15px;
  padding: 30px;
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.game-header {
  text-align: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #d4af37;
}

.game-header h2 {
  color: #8b4513;
  margin: 0 0 10px 0;
  font-size: 2em;
}

.game-header p {
  color: #696969;
  margin: 0 0 15px 0;
}

.poem-info h3 {
  color: #d4af37;
  margin: 0;
  font-size: 1.3em;
}

.game-content {
  margin-bottom: 25px;
}

.verse-game {
  margin-bottom: 20px;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

.verse-display {
  display: flex;
  align-items: center;
  gap: 10px;
}

.verse-number {
  color: #8b4513;
  font-weight: bold;
  min-width: 80px;
}

.blanks-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.char-text {
  font-size: 1.2em;
  color: #333;
}

.blank-input {
  display: inline-block;
}

.blank-field {
  width: 30px;
  height: 30px;
  text-align: center;
  border: 2px solid #d4af37;
  border-radius: 5px;
  font-size: 1.1em;
  background: white;
  color: #333;
}

.blank-field:focus {
  outline: none;
  border-color: #8b4513;
  box-shadow: 0 0 5px rgba(139, 69, 19, 0.3);
}

.game-result {
  text-align: center;
}

.game-result h2 {
  color: #8b4513;
  margin-bottom: 20px;
  font-size: 2em;
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.stat-item {
  background: #f0e68c;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #d4af37;
}

.stat-label {
  color: #8b4513;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.stat-value {
  color: #333;
  font-size: 1.2em;
  font-weight: bold;
}

.result-poem {
  margin-bottom: 25px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

.result-poem h3 {
  color: #8b4513;
  margin-bottom: 15px;
}

.complete-poem {
  text-align: center;
}

.verse-line {
  margin: 8px 0;
  font-size: 1.2em;
  color: #333;
  line-height: 1.8;
}

@media (max-width: 600px) {
  .memory-game-container {
    padding: 20px;
    width: 95%;
  }
  
  .game-header h2 {
    font-size: 1.6em;
  }
  
  .verse-display {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .blanks-container {
    justify-content: flex-start;
  }
  
  .result-stats {
    grid-template-columns: 1fr;
  }
}

/* 朗读练习样式 */
.recitation-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.recitation-container {
  background: white;
  border-radius: 15px;
  padding: 30px;
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.recitation-area {
  text-align: center;
}

.recitation-header {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #d4af37;
}

.recitation-header h2 {
  color: #8b4513;
  margin: 0 0 10px 0;
  font-size: 2em;
}

.recitation-header p {
  color: #696969;
  margin: 0 0 15px 0;
}

.poem-info h3 {
  color: #d4af37;
  margin: 0;
  font-size: 1.3em;
}

.recitation-content {
  margin-bottom: 25px;
}

.poem-display {
  margin-bottom: 20px;
}

.poem-display h4 {
  color: #8b4513;
  margin-bottom: 10px;
  font-size: 1.3em;
}

.verses-display {
  background: #fafafa;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

.verse-line {
  margin: 8px 0;
  font-size: 1.2em;
  color: #333;
  line-height: 1.8;
}

.recitation-controls {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.control-btn {
  background: linear-gradient(135deg, #d4af37, #b8860b);
  border: none;
  padding: 12px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  color: white;
  transition: all 0.3s ease;
  font-size: 1em;
}

.control-btn:hover {
  background: linear-gradient(135deg, #b8860b, #8b6914);
  transform: translateY(-2px);
}

.record-btn {
  background: linear-gradient(135deg, #4CAF50, #45a049);
}

.record-btn:hover {
  background: linear-gradient(135deg, #45a049, #3d8b40);
}

.recording-status {
  margin-bottom: 20px;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

.recording-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #4CAF50;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

.recitation-result {
  text-align: center;
}

.recitation-result h2 {
  color: #8b4513;
  margin-bottom: 20px;
  font-size: 2em;
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.stat-item {
  background: #f0e68c;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #d4af37;
}

.stat-label {
  color: #8b4513;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.stat-value {
  color: #333;
  font-size: 1.2em;
  font-weight: bold;
}

.feedback-section {
  margin-bottom: 25px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

.feedback-list {
  list-style: none;
  padding: 0;
}

.feedback-item {
  margin: 8px 0;
  font-size: 1.2em;
  color: #333;
  line-height: 1.8;
}

.audio-comparison {
  margin-bottom: 25px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

.audio-controls {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.control-btn {
  background: linear-gradient(135deg, #d4af37, #b8860b);
  border: none;
  padding: 12px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  color: white;
  transition: all 0.3s ease;
  font-size: 1em;
}

.control-btn:hover {
  background: linear-gradient(135deg, #b8860b, #8b6914);
  transform: translateY(-2px);
}

.recording-timer {
  margin-top: 10px;
  color: #666;
  font-size: 0.9em;
}

.feedback-section h3 {
  color: #8b4513;
  margin-bottom: 15px;
  font-size: 1.3em;
}

.audio-comparison h3 {
  color: #8b4513;
  margin-bottom: 15px;
  font-size: 1.3em;
}

@media (max-width: 600px) {
  .recitation-container {
    padding: 20px;
    width: 95%;
  }
  
  .recitation-header h2 {
    font-size: 1.6em;
  }
  
  .recitation-controls {
    flex-direction: column;
    align-items: center;
  }
  
  .audio-controls {
    flex-direction: column;
    align-items: center;
  }
  
  .result-stats {
    grid-template-columns: 1fr;
  }
}
</style> 